<template>

  <div class="home">
    <footer class="nav">
        <ul class="">
          <li class="line" v-for="m in menus">
              <router-link :to="setPath(m.path)"><i :class="m.style">{{m.mes}}</i><span>{{m.text}}</span></router-link>
          </li>
        </ul>
    </footer>
  </div>

</template>

<script>
export default {
  name: 'home',
  data() {
    return{

      menus:[{
          text: '精选',
          path: '/',
          style: 'M',
          mes: 'M'
        },{
          text: '发现',
          path: '/discover',
          style: 'O',
          mes: 'O'
        },{
          text: '社区',
          path: '/community',
          style: 'N',
          mes: 'N'
        },
        {
          text: '我的',
          path: '/mine',
          style: 'O',
          mes: 'O'
        }
      ]
    }
  },
  methods: {
      setPath(path) {
          return path
      }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
  .nav{
    position: fixed;
    bottom:0;
    left: 0;
    width:100%;
    background: #232427;
    padding: 0;
    margin: 0;

    ul{
      position: relative;
      width:100%
      height: 100%;
      display: flex;
    margin: 7px 0 5px;
    }
    .line{
      display: inline-block;
      flex: 1;
      font-size: 12px;
      a{
        display: block;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction:column
        color: #fff;

        i{
          width: 20px;
          height: 20px;
          display: block;
          colot: #fff;
          font-size: 18px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 400
        }
      }
    }
  }
.nav .line .router-link-exact-active {
    color: #15a4ae;
  }
</style>
